<template>
    <div class="weather-box">
        <div class="roll-Time">
            <div>16:24</div>
            <div>2022-04-27</div>
        </div>
        <div class="icon-box">
            <img :src="getImg('weather-icon.png')" alt="" class="icon">
            <div>多云</div>
        </div>
        <div class="location-box">
            <div>26度</div>
            <div>
                <div class="pin"></div>
                <div class="pulse"></div>
                <div class="location">成都市龙泉地区</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed, getCurrentInstance, onMounted, nextTick } from 'vue'
import { useStore } from "vuex"
import getImg from "@/utils/getImg.js"

const { proxy } = getCurrentInstance();
const store = useStore()
</script>
<style lang="less" scoped>
.weather-box {
    margin: 24px 20px;
    border-radius: 8px;
    background-color: #244A8152;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .roll-Time,
    .icon-box,
    .location-box {
        padding: 20px;
    }

    .roll-Time {
        div:nth-child(1) {
            font-family: 'DIN';
            font-style: normal;
            font-weight: 500;
            font-size: 24px;
            line-height: 29px;
            text-align: center;
            color: #FFFFFF;
            margin-bottom: 5px;
        }

        div:nth-child(2) {
            font-family: 'PingFang SC';
            font-style: normal;
            font-weight: 400;
            font-size: 12px;
            line-height: 17px;
            text-align: center;
            color: rgba(255, 255, 255, 0.64);
        }
    }

    .icon-box {
        .icon {
            width: 72px;
            height: 72px;
        }

        div:nth-child(2) {
            color: rgba(255, 255, 255, 0.62);
        }
    }

    .location-box {
        div:nth-child(1) {
            font-family: 'DIN';
            font-style: normal;
            font-weight: 500;
            font-size: 24px;
            line-height: 29px;
            text-align: right;
            color: #FFFFFF;
        }

        div:nth-child(2) {
            color: rgba(255, 255, 255, 0.64);
            position: relative;

            /* 图标 */
            .pin {
                width: 20px;
                height: 20px;
                border-radius: 50% 50% 50% 0; //设置坐标图标的图形样式
                background: #FFA14A;
                position: absolute;
                transform: rotate(-45deg); //旋转，负的值表示逆时针旋转
                left: -12.9%;
                top: 93%;
                margin: -20px 0 0 -20px;
                animation-name: bounce; //动画名称
                animation-duration: 1s; //动画完成的总时长
            }

            .pin:after {
                content: '';
                width: 10px;
                height: 11px;
                margin: 7px 0 0 7px;
                background: rgba(246, 246, 246, 0.95); //设置中间的白色小圆
                position: absolute;
                top: -2px;
                left: -4px;
                border-radius: 50%;
            }

            .pulse {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 50%;
                height: 14px;
                width: 14px;
                position: absolute;
                left: -18%;
                top: 21%;
                margin: 11px 0px 0px -12px;
                transform: rotateX(55deg);
                z-index: 10;

                &::after {
                    content: "";
                    border-radius: 50%;
                    height: 16px;
                    width: 30px;
                    position: absolute;
                    margin: 0px 0 0 -15px;
                    animation: pulsate 1s ease-out;
                    animation-iteration-count: infinite;
                    opacity: 0;
                    -webkit-box-shadow: 0 0 1px 2px #89849b;
                    box-shadow: 0 0 1px 2px #FFA14A;
                    animation-delay: 1.1s;
                }
            }

            @keyframes pulsate {
                0% {
                    transform: scale(0.1, 0.1);
                    opacity: 0;
                }

                50% {
                    opacity: 1; //不透明度，1为完全显示
                }

                100% {
                    transform: scale(1.2, 1.2);
                    opacity: 0;
                }
            }

            @keyframes bounce {
                0% {
                    opacity: 0; //translateY   y轴移动
                    transform: translateY(-2000px) rotate(-45deg);
                }

                60% {
                    opacity: 1; //设置rotate的原因是 上面样式设置的transform要在动画之后生效，每一个阶段的样式的基准点都是按照原样式的
                    transform: translateY(30px) rotate(-45deg);
                }

                80% {
                    transform: translateY(-10px) rotate(-45deg);
                }

                100% {
                    transform: translateY(0) rotate(-45deg);
                }
            }

            .location {
                margin-top: 10px;
            }
        }
    }
}
</style>